import * as React from 'react'
import './index.less'

export default class VerifyView extends React.Component<any, any> {

    public state = {
        visible: true
    }

    private node: any

    public render(): JSX.Element {
        const { visible } = this.state
        return (
            <div className={`verfiy_view${visible ? '' : ' hide'}`}>
                <div style={{ textAlign: 'center', fontSize: '0.97rem', lineHeight: '4rem' }}>认证魔方</div>
                <div className="scan-wrap">
                    <div className="scan-mod">
                        <div className="scan-img animated zoomIn">
                            <div className="scan-cont scan-cont1">
                                <i />
                                <div className="cont" />
                            </div>
                            <div className="scan-cont scan-cont2">
                                <i />
                                <div className="cont" />
                            </div>
                            <div className="scan-cont scan-cont3" ref={(e: any) => { this.node = e }}>
                                <i />
                                <div className="cont" />
                            </div>
                        </div>
                    </div>
                    <div className="scan-txt">
                        <ul>
                            <li className="fore1">正在进行账号安全检测...</li>
                            <li className="fore2">正在进行操作环境检测...</li>
                            <li className="fore3">正在进行安全检测...</li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.node.addEventListener('animationend', this.closeAnimation)
    }

    public componentWillUnmount() {
        this.node.removeEventListener('animationend', this.closeAnimation)
    }

    private closeAnimation = () => {
        this.setState({
            visible: false
        })
    }
}